<template>
  <div class="item-info base-info">
    <div class="left-info">
      <div class="item" v-if="this.dotype!='1'">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋编号
        </span>
        <input
          type="text"
          v-model="houseData.detailnum"
          :class="{xiugai: houseData1.detailnum}"
          readonly
        >
        <b class="code" @click="newfwcode" v-if="(dotype=='1'||dotype=='2')&&ishowfwbh">生成房屋编号</b>
      </div>

      <div class="item spec clearfix">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋实测面积
          <br>(平方米)
        </span>
        <div class="text">
          <input type="text" value="有证" readonly>
          <input type="text" v-model="fwarea1" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)" :readonly="dotype=='4'||dotype=='3'">
        </div>
        <div class="text">
          <input type="text" value="无证" readonly>
          <input type="text" v-model="fwarea2" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)" :readonly="dotype=='4'||dotype=='3'">
        </div>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>占地面积(平方米)
        </span>
        <input type="text" v-model="houseData.zdmj" disabled>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋结构
        </span>
        <select
          v-model="houseData.dstruct"
          :class="{xiugai:houseData1.dstruct}"
          :disabled="dotype=='4'||dotype=='3'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in horgArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋状态
        </span>
        <select
          v-model="houseData.dstatus"
          :class="{xiugai:houseData1.dstatus}"
          :disabled="dotype=='4'||dotype=='3'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in hstatusArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>楼层数量
        </span>
        <input
          type="text"
          :disabled="dotype=='4'||dotype=='3'"
          v-model="houseData.floornum"
          :class="{xiugai:houseData1.floornum}"
          oninput = "value=value.replace(/[^\d]/g,'')"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请输入'"
          v-validate="'required|decimal'"
          name="楼层数量"
        >
        <b class="errorMes">{{ errors.first('楼层数量') }}</b>
      </div>

      <div class="item icon">
        <span>建筑年限</span>
        <el-date-picker
          type="month"
          :disabled="handletype=='4'||handletype=='3'"
          v-model="houseData.buildtime"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
          valueFormat="yyyy-MM"
          style="width:300px;border-color:#ccc"
        ></el-date-picker>
      </div>
      <div class="item" style="margin-top:10px">
        <span>建筑年数</span>
        <input type="text" v-model="buildyears" :class="{xiugai:houseData1.buildyears}" disabled>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>权属性质
        </span>
        <select
          v-model="houseData.owntype"
          :class="{xiugai:houseData1.owntype}"
          :disabled="handletype=='4'||handletype=='3'"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in owntypeArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
    </div>
    <div class="right-info">
      <div class="item textarea">
        <span>房屋备注</span>
        <textarea type="text" v-model="houseData.remark"></textarea>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      houseData: {},
      houseData1: {},
      dotype: '',
    };
  },
  mounted() {
    this.dotype = this.handletype;
  },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.code {
  padding: 7px 3px;
  height: 33px;
  line-height: 33px;
  position: relative;
  background: #69f;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
}

.errorMes {
  width: 160px;
  color: red;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.weixiugai {
  background: #69f;
}

.item {
  i {
    color: red;
  }
}

.base_header {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #69f;
}

.xiugai {
  background: #ffff0070;
}

.avatar ul li {
  float: left;
  width: 33%;
}

.info-wrapper .info-content .upload-btn[data-v-6b40dfc5] {
  background: #fff;
  width: 90px;
}

.item-info>>>.el-date-editor .el-range-separator {
  padding: 0;
  line-height: 22px;
}

.item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 300px;
  height: 30px;
}

.item-info >>>.el-input__inner {
  height: 30px;
  border-top: 2px solid #999;
  border-radius: 0;
}

.item-info >>>.el-input__icon {
  line-height: 22px;
  color: #333;
}

.avatar >>>.el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 100px;
  margin-top: 20px;
}

.avatar >>>.el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
  margin-top: 20px;
}

.upload-btn >>>.el-upload-list__item {
  width: 160%;
}

.sub-btn >>> .el-button--success {
  background: #69f;
  border-color: #69f;
}

.sub-btn >>> .el-button {
  padding: 8px 20px;
}

.info-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  .info-w {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #69f;
    color: #fff;
    cursor: pointer;

    .info-c {
      width: 1200px;
      margin: 0 auto;

      .close {
        display: inline-block;
        margin-right: 20px;

        .iconfont {
          font-size: 20px;
        }
      }

      .title {
        display: inline-block;
        font-size: 18px;
      }
    }
  }

  .info-content {
    width: 1200px;
    min-height: 600px;
    margin: 0 auto 50px;

    .upload-btn {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      color: #fff;
    }

    .info-tab {
      cursor: pointer;
      border-bottom: 1px solid #ccc;

      .tab-item {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 15px 0 15px -1px;
        background: #fff;

        &.active {
          background: #69f;
          color: #fff;
        }
      }
    }

    .item-info {
      position: relative;
      margin-bottom: 50px;

      .sub-btn {
        position: absolute;
        right: 190px;
        top: -60px;
        height: 40px;
        line-height: 40px;

        .save-btn, .add-btn {
          display: inline-block;
          margin-right: 15px;
        }
      }

      .info-list {
        margin-top: 50px;
        border-top: 1px solid #ccc;
        text-align: center;

        .title {
          padding: 30px 0;
          font-weight: 600;
          font-size: 18px;
          color: #6699ff;
        }

        table {
          text-align: center;
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          td, th {
            border: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            height: 40px;
          }

          thead {
            th {
              font-weight: 600;
              background-color: #F2F2F2;

              &:nth-of-type(1) {
                width: 40px;
              }

              &:nth-of-type(2) {
                width: 120px;
              }
            }
          }
        }
      }

      .left-info, .right-info {
        display: inline-block;
        vertical-align: top;
        width: 600px;

        .item {
          margin-top: 5px;
          height: 30px;
          line-height: 30px;

          &:nth-of-type(1) {
            margin-top: 15px;
          }

          &.icon {
            position: relative;

            .iconfont {
              position: absolute;
              top: 0;
              right: 190px;
            }
          }

          span {
            display: inline-block;
            vertical-align: top;
            width: 140px;
            color: #333333;
            font-weight: 600;
          }

          input {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
          }

          select {
            display: inline-block;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
            text-align: right;

            &.min1 {
              width: 100px;
            }

            &.min2 {
              width: 200px;
              margin-left: -1px;
            }
          }

          &.textarea {
            height: 150px;

            textarea {
              width: 300px;
              height: 150px;
              border: 1px solid #ccc;
              border-top: 2px solid #999;
            }
          }

          &.spec {
            height: 70px;

            span {
              float: left;
            }

            .text {
              display: inline-block;

              input:nth-of-type(1) {
                width: 100px;
              }

              input:nth-of-type(2) {
                width: 200px;
              }

              &:nth-of-type(2) {
                margin-top: 5px;
              }
            }
          }

          &.spec2 {
            height: 30px;

            .text {
              display: inline-block;

              input {
                display: inline-block;
                vertical-align: top;
              }

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }

              select {
                display: inline-block;
                vertical-align: top;
                width: 100px;
              }
            }
          }

          &.spec3 {
            height: 70px;

            span {
              height: 70px;
              float: left;
            }

            .text {
              display: inline-block;
              margin-top: 5px;

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }
            }
          }

          &.spec4 {
            height: 70px;

            span {
              float: left;
              height: 70px;
            }

            input {
              margin-top: 5px;
            }
          }

          &.spec5 {
            .line {
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 1px;
              background: #ccc;
            }

            .iconfont {
              &:ntn-of-type(1) {
                right: 190px;
              }

              &:nth-of-type(2) {
                right: 350px;
              }
            }
          }
        }

        .upload {
          width: 400px;
          margin-top: 15px;
          text-align: center;

          .avatar {
            width: 400px;
            height: 175px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
          }

          .desc {
            margin-bottom: 15px;
          }

          .btn {
            display: inline-block;
            margin-bottom: 15px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            background: #69f;
            color: #fff;
          }
        }
      }

      &.base-info {
        .right-info {
          .item {
            margin-top: 6px;
          }
        }
      }

      &.rent-info {
        .right-info {
          .item {
            margin-top: 11px;

            &:nth-of-type(1) {
              margin-top: 15px;
            }
          }
        }
      }

      span {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}
</style>
